<template>
  <view class="bg-white">
    <!-- 头部导航栏 -->
    <view class="top-navigate bg-white" style="padding: 53px 10px 10px 10px;" @click="goPickSend">
      <view class="content cuIcon-back text-xl top-navigate-title"></view>
      <view class="text-xl top-navigate-title">选择收货地址</view>
    </view>

    <!-- 搜索栏 -->
    <view class="cu-bar search bg-white">
      <view class="action">
        <text>{{cityName}}</text>
        <text class="cuIcon-triangledownfill"></text>
      </view>
      <view class="search-form round">
        <text class="cuIcon-search"></text>
        <input @click="searchAddress" :adjust-position="false" type="text" placeholder="搜索地址信息"
          confirm-type="search"></input>
      </view>
    </view>
    <!-- 重新定位 -->
    <view class="cu-form-group" style="border-bottom: 1px #efefef solid;">
      <view class="title text-cut" style="width: 250px;">{{address.name}}</view>
      <button class='cu-btn bg-green shadow' @click="redirectLocation">重新定位</button>
    </view>
    <view class="text-gray text-df cu-form-group">我的收货地址</view>
    <!-- 我的收货地址列表 -->
    <view class="cu-list menu-avatar" v-for="(item,index) in addressList" :key="index">
      <!--  -->
      <view class="cu-form-group" style="border-bottom: 1px #efefef solid;" @click="selectAddressInfo(item)">
        <view class="cu-item-address">
          <view class="text-cut text-black">
            {{item.address_name + item.address_detail}}
          </view>
          <view class="text-gray text-sm flex">
            <view style="margin-right:10px;">{{item.user_name}}</view>
            <view class="">{{item.user_phone}}</view>
          </view>
        </view>
      </view>

    </view>

  </view>
</template>

<script>
  import {
    mapState,
    mapMutations,
    mapGetters
  } from 'vuex'
  export default {
    name: "my-address",
    data() {
      return {

      };
    },
    methods: {
      ...mapMutations('m_user', ['updateAddress', 'updateAddressList']),
      // 点击搜索框
      searchAddress() {
        uni.chooseLocation({
          success: (res) => {
            console.log(res);
            this.$parent.cityName = res.address.substring(3, 6)
            this.updateAddress({
              name: res.name,
              latitude: res.latitude,
              longitude: res.longitude,
              userName: this.userinfo.user_name,
              phone: this.userinfo.user_phone
            })
            console.log('位置名称：' + res.name);
            console.log('详细地址：' + res.address);
            console.log('纬度：' + res.latitude);
            console.log('经度：' + res.longitude);
          },
          fail: (err) => {
            uni.showToast({
              title: '获取位置失败'
            });
          }
        });

        this.goPickSend()
      },
      //返回详情页
      goPickSend() {
        this.$parent.addressShowBox = false
      },
      //重新获取当前定位事件:调用父组件 getLocation（）
      redirectLocation() {
        this.$parent.getRegeo()
        this.goPickSend()
      },
      // 获取数据库地址列表数据
      async getAddressList() {
        const db = uniCloud.database();
        const {
          result: getAddressListInfo
        } = await db.collection("my_address").where({
          user_id: this.userinfo._id
        }).get();
        console.log(getAddressListInfo);
        this.updateAddressList(getAddressListInfo.data)
      },
      //选择收货地址为当前位置事件
      selectAddressInfo(item) {
        console.log(item);
        // this.$parent.longitude = item.address_longitude
        // this.$parent.latitude = item.address_latitude
        this.$parent.cityName = item.address_detail.substring(3, 6)
        this.updateAddress({
          name: item.address_name,
          latitude: item.address_latitude,
          longitude: item.address_longitude,
          userName: item.user_name,
          phone: item.user_phone
        })
        //为标记点经纬度重新赋值【在data中赋坐标的方式无效】
        // this.$parent.covers[0].longitude = item.address_longitude
        // this.$parent.covers[0].latitude = item.address_latitude
        //返回
        this.goPickSend()
      }
    },
    computed: {
      ...mapState('m_user', ['address', 'addressList', 'userinfo']),
      cityName() {
        return this.$parent.cityName
      }
    },
    mounted() {
      this.getAddressList()
    }
  }
</script>

<style lang="scss">
  .top-navigate {
    display: flex;
    justify-content: left;
    align-items: center;

    .top-navigate-title {
      margin: 0 5px;
      font-weight: bold;
    }
  }

  .cu-item-address {
    width: 100%;
    line-height: 1.6em;
  }

  .add-address {
    position: absolute;
    bottom: 0;
    background-color: #ffffff;
    padding: 1rpx 30rpx;
    display: flex;
    align-items: center;
    min-height: 100rpx;
    justify-content: center;
    width: 100%;
  }
</style>